<template>
  <div class="home">
    <van-nav-bar title="标题" left-arrow>
      <template #left>
        <p class="dingwei" @click="toDingWei">重庆</p>
        <van-icon name="location" size="20" color="#000000" />
      </template>
      <template #title>
        <van-search
          placeholder="To Search"
          left-icon="search"
          class="search"
          input-align="center"
          shape="round"
        />
      </template>
      <template #right>
        <!-- <van-icon class-prefix="iconfont" name="search"/> -->
        <van-icon name="bulb-o" size="20" color="#000000" />
      </template>
    </van-nav-bar>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :height="150"
    >
      <van-swipe-item v-for="item in dataList" :key="item.id"
        ><img class="simg" :src="item.imgUrl"
      /></van-swipe-item>
    </van-swipe>
    <div class="ic">
      <div class="iic" v-for="(item, index) in ic" :key="index">
        <van-icon class-prefix="iconfont" :name="item.i" :size="30" />
        <span>{{ item.k }}</span>
      </div>
    </div>
    <div class="card">
      <div class="top">
        <div class="title"><van-icon name="fire" />热门</div>
        <div class="gengduo">
          <router-link to="/home">查看更多 ></router-link>
        </div>
      </div>
      <div class="main" @click="enterAbout">
        <div class="main-card" v-for="(item, index) in hotpic" :key="index">
          <img :src="item.p" alt="" />
          <span>{{ item.n }}</span>
        </div>
      </div>
    </div>
    <div class="card-y">
      <div class="top">
        <div class="title"><van-icon name="gift" />优惠</div>
        <div class="gengduo">
          <router-link to="/home">查看更多 ></router-link>
        </div>
      </div>
      <div class="main">
        <div class="main-card" v-for="(item, index) in youpic" :key="index">
          <img :src="item.p" alt="" />
          <span>{{ item.n }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "../mock/index";
export default {
  created() {
    this.$http("/api/swiper").then((res) => {
      this.dataList = res.data.swiperList;
    });
  },
  data() {
    return {
      dataList: [],
      ic: [
        { k: "地图", i: "ditu" },
        { k: "方向", i: "tupian" },
        { k: "飞机票", i: "jiudian1" },
        { k: "风景", i: "feiji1" },
        { k: "火车", i: "meishi-" },
        { k: "飞机", i: "train" },
        { k: "酒店", i: "zhinanzhen1" },
        { k: "美食", i: "menpiao" },
      ],
      hotpic: [
        { n: "颐和园", p: require("../assets/img/yiheyuan.jpg") },
        { n: "圆明园", p: require("../assets/img/yuanminyuan.jpg") },
        { n: "恭王府", p: require("../assets/img/gongwangfu.jpg") },
        { n: "八达岭长城", p: require("../assets/img/changcheng.jpg") },
      ],
      youpic: [
        { n: "北京动物园", p: require("../assets/img/beijingdongwuyuan.jpg") },
        {
          n: "天安门广场",
          p: require("../assets/img/tiananmenguangchang.jpg"),
        },
        { n: "北京海洋馆", p: require("../assets/img/beijinghaiyangguan.jpg") },
        { n: "北海公园", p: require("../assets/img/beihaigongyuan.jpg") },
      ],
    };
  },
  methods: {
    toDingWei() {
      this.$router.push("/city");
    },
    enterAbout(){
       this.$router.push("/about")
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  // background-color: #f5e4e5;
  // background-color: #f2fcf9;
  height: 920px;
  :deep(.van-search) {
    .van-search__content {
      .van-field__left-icon {
        .van-icon {
          color: grey;
          font-size: 20px;
        }
      }
    }
  }
  .my-swipe {
    width: 90%;
    height: 130px;
    margin: 10px auto;
    border-radius: 8px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ic {
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;

    flex-wrap: wrap;
    .iic {
      display: flex;
      width: 25%;
      height: 25%;
      margin: 5px 0;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      span {
        text-align: center;
        font-size: 14px;
      }
      i {
        text-align: center;
        line-height: 35px;

        &::before {
          display: inline-block;
          background-color: #f29c9f;
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
      }
    }
  }
  .card,
  .card-y {
    width: 90%;
    margin: 12px auto;
    .top {
      display: flex;
      justify-content: space-between;
      .title {
        font-weight: 700;
        i {
          color: #f29c9f;
        }
      }
      .gengduo {
        a{
            color: #878787;
            font-size: 12px;
        }
      }
    }
    .main {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .main-card {
        width: 49%;
        position: relative;
        margin: 5px 0;
        height: 100px;
        flex-direction: row;
        text-align: center;
        img {
          width: 100%;
          border-radius: 10px;
        }
        span {
          position: relative;
          top: -30px;
          color: white;
          font-family: "方正舒体";
        }
      }
    }
  }
}
</style>